﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>index</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>
<script>
    $(window).load(function() {
        $(".loading").fadeOut()
    })

    /****/
    $(document).ready(function() {
        var whei = $(window).width()

        $("html").css({
            fontSize: whei / 20
        })
        $(window).resize(function() {
            var whei = $(window).width()
            $("html").css({
                fontSize: whei / 20
            })
        });

        // 获取天气接口
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) { //响应完成且成功
                    console.log(JSON.parse(xhr.responseText))
                    let result = JSON.parse(xhr.responseText)
                    tianqi.innerHTML = result.result.weather
                    diqu.innerHTML = result.result.citynm
                    sheshidu.innerHTML = result.result.temperature
                    let tianqi_icon = '<img src = "' + result.result.weather_icon + '" style="margin-right:.1rem" />'
                    $(".tianqi_icon").html(tianqi_icon)
                } else { //响应完成但不成功
                    alert('响应完成但失败！' + xhr.status);
                }
            }
        }
        xhr.open('GET', 'http://api.k780.com/?app=weather.today&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&cityId=101040100', true); //URI无请求数据
        xhr.send();

        $('#indicatorContainer').radialIndicator({
            barColor: '#007aff',
            barWidth: 5,
            initValue: 345,
            roundCorner: true,
            percentage: true,
            displayNumber: false,
            radius: 50
        });

        $('#indicatorContainer1').radialIndicator({
            barColor: '#007aff',
            barWidth: 5,
            initValue: 304,
            roundCorner: true,
            percentage: true,
            displayNumber: false,
            radius: 50
        });

        $('#indicatorContainer2').radialIndicator({
            barColor: '#007aff',
            barWidth: 5,
            initValue: 785,
            roundCorner: true,
            percentage: true,
            displayNumber: false,
            radius: 50
        });

        $('#indicatorContainer3').radialIndicator({
            barColor: '#007aff',
            barWidth: 5,
            initValue: 457,
            roundCorner: true,
            percentage: true,
            displayNumber: false,
            radius: 50
        });


    });
</script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script language="JavaScript" src="js/js.js"></script>
<script language="JavaScript" src="js/radialIndicator.js"></script>

<body>
    <div class="canvas" style="opacity: .2">
        <iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>
    </div>
    <div class="loading">
        <div class="loadbox"> <img src="picture/loading.gif"> 页面加载中... </div>
    </div>
    <div class="head">
        <div class="weather1">
            <div class="tianqi_icon"></div>
            <span id="diqu"></span>
            <span id="tianqi"></span>
            <span id="sheshidu"></span>
        </div>
        <h1 style="font-family: FZLanTingHeiS-R-GB;
        font-weight: bold;
        background: linear-gradient(0deg, #D2F5FF 0%, #81CEFF 65.0390625%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;letter-spacing:.1rem;">
            及炫添可视化监测平台</h1>
        <div class="weather">
            <span id="showTime"></span>
        </div>

        <script>
            var t = null;
            t = setTimeout(time, 1000); //開始运行
            function time() {
                clearTimeout(t); //清除定时器
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours() < 10 ? '0' + dt.getHours() : dt.getHours(); //获取时
                var m = dt.getMinutes() < 10 ? '0' + dt.getMinutes() : dt.getMinutes(); //获取分
                var s = dt.getSeconds() < 10 ? '0' + dt.getSeconds() : dt.getSeconds();; //获取秒
                document.getElementById("showTime").innerHTML = y + "/" + mt + "/" + day + " " + h + ":" + m + ":" + s;
                t = setTimeout(time, 1000); //设定定时器，循环运行     
            }
        </script>


    </div>
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle">订单总数（6666笔）</div>
                    <div class="allnav" id="echart1"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle">下单趋势图</div>
                    <div class="allnav" id="echart2"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle">实时订单信息</div>
                    <div style="height:90%; width: 100%;display:none">
                        <div class="sy" id="fb1"></div>
                        <div class="sy" id="fb2"></div>
                        <div class="sy" id="fb3"></div>
                    </div>
                    <div class="main_table t_btn8">
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>产品</th>
                                    <th>平台</th>
                                    <th>金额</th>
                                    <th>下单时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>富硒大米</td>
                                    <td>家联家</td>
                                    <td>158</td>
                                    <td>14:49</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>富硒大米</td>
                                    <td>家联家</td>
                                    <td>158</td>
                                    <td>14:49</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>富硒大米</td>
                                    <td>家联家</td>
                                    <td>158</td>
                                    <td>14:49</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>富硒大米</td>
                                    <td>家联家</td>
                                    <td>158</td>
                                    <td>14:49</td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>富硒大米</td>
                                    <td>家联家</td>
                                    <td>158</td>
                                    <td>14:49</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="bar">
                    <div class="barbox">
                        <ul class="clearfix">
                            <li class="pulll_left counter" style="color:red">666666<span style="font-size: .5rem;
                                color: red;
                                font-family: electronicFont;
                                font-weight: bold;margin-left: .1rem;">元</span></li>
                            <li class="pulll_left counter">6666<span style="font-size: .5rem;
                                color: #ffeb7b;
                                font-family: electronicFont;
                                font-weight: bold;margin-left: .1rem;">元</span></li>
                        </ul>
                    </div>
                    <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left">交易总额 </li>
                            <li class="pulll_left">今日成交额</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="map1"><img src="picture/lbx.png"></div>
                    <div class="map2"><img src="picture/jt.png"></div>
                    <div class="map3"><img src="picture/map.png"></div>
                    <div class="map4" id="map_1"></div>
                    <div class="map5">
                        <div style="position: relative">
                            <img src="picture/zs.png" style="width:1.9rem">
                            <div class="zss">
                                <div class="zs">订单总数</div>
                                <div class="zs_num">408577</div>
                            </div>
                        </div>
                        <div style="position: relative">
                            <img src="picture/zs.png" style="width:1.9rem">
                            <div class="zss">
                                <div class="zs">今日订单数</div>
                                <div class="zs_num">408577</div>
                            </div>
                        </div>
                        <div style="position: relative">
                            <img src="picture/zs.png" style="width:1.9rem">
                            <div class="zss">
                                <div class="zs">用户总数</div>
                                <div class="zs_num">408577</div>
                            </div>
                        </div>
                        <div style="position: relative">
                            <img src="picture/zs.png" style="width:1.9rem">
                            <div class="zss">
                                <div class="zs">今日用户数</div>
                                <div class="zs_num">408577</div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:3.4rem">
                    <div class="alltitle">用户总数</div>
                    <div class="allnav1" id="echart7"></div>
                    <div class="allnav2" id="echart4"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle">用户增长趋势</div>
                    <div class="allnav" id="echart5"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3rem">
                    <div class="alltitle">用户地域排行榜</div>
                    <div class="allnav" id="echart6"></div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
    </div>
    <div class="back"></div>


    <script type="text/javascript" src="js/china.js"></script>
    <script type="text/javascript" src="js/area_echarts.js"></script>
</body>

</html>